<template>
  <div class="left" ref="list">
    <div class="left-top">
      <div class="list-item">
        <div class="list">
          <p>主要疫情国家治愈率</p>
        </div>
        <div id="mainone"></div>
      </div>
    </div>
    <div class="left-top">
      <div class="list-item">
        <div class="list">
          <p>世界每周新增治愈和死亡人数</p>
        </div>
        <div id="maintwo"></div>
      </div>
    </div>
    <div class="left-top">
      <div class="list-item">
        <div class="list">
          <p>境外输入病情top10省份</p>
        </div>
        <div id="mainthree" style="width: 370px"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import $ from "jquery";

export default {
  data() {
    return {};
  },
  mounted() {
      this.$refs.list
      
  
    let p1 = new Promise((reslove, reject) => {
      $.ajax({
        url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign",
        dataType: "jsonp",
        success(res) {
          //
          let data = JSON.parse(res.data);
          console.log(data, 47);
          reslove(data);
        },
        error(err) {
          reject(err);
        },
      });
    });
    p1.then((res) => {
      //右1

      let right1 = document.getElementById("mainone");
      let mainone = this.one(res.foreignList.slice(0, 5));
      // console.log("61",mainone);
      this.addCharts(right1, mainone);
      //右2
      let right2 = document.getElementById("maintwo");
      let maintwo = this.two(res.globalDailyHistory);
      this.addCharts(right2, maintwo);

      let right3 = document.getElementById("mainthree");
      let mainthree = this.three(res.importStatis);
      this.addCharts(right3, mainthree);
    });
  },
  methods: {
    //1.初始echerts
    addCharts(dom, option) {
      let myChart = echarts.init(dom);
      option && myChart.setOption(option);
      //监听
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    one(datalist) {
      console.log(datalist, "list");
      // 数据
      var dataitem = [];
      //地址
      var titlename = [];
      var valdata = [683, 234, 234, 523, 345];
      var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];

      for (const item of datalist) {
        titlename.push(item.name);
        dataitem.push(item.date);
      }
      let option = {
        grid: {
          left: "5%",
          top: "20%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        backgroundColor: "#0e2147",
        xAxis: {
          show: false,
        },

        yAxis: [
          {
            show: true,
            data: titlename,
            inverse: true,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#fff",
              // formatter: function (value, index) {
              //   return [
              //     "{lg|" + (index + 1) + "}" + "{title|" + value + "} ",
              //   ].join("\n");
              // },
              rich: {
                lg: {
                  backgroundColor: "#339911",
                  color: "#fff",
                  borderRadius: 15,
                  // padding: 5,
                  align: "center",
                  width: 15,
                  height: 15,
                },
              },
            },
          },
          {
            show: true,
            inverse: true,
            data: valdata,
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: "#fff",
              },
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "条",
            type: "bar",
            yAxisIndex: 0,
            data: dataitem,
            barWidth: 15,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: function (params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                },
              },
            },
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{c}%",
              },
            },
          },
          {
            name: "框",
            type: "bar",
            yAxisIndex: 1,
            barGap: "-100%",
            data: [100, 100, 100, 100, 100],
            barWidth: 15,
            itemStyle: {
              normal: {
                color: "none",
                borderColor: "#00c1de",
                borderWidth: 1,
                barBorderRadius: 15,
              },
            },
          },
        ],
      };
      return option;
    },
    two(twolist) {
      console.log(twolist, "two");

      let xAxis = [];
      let list = [];

      for (const item of twolist) {
        xAxis.push(item.date);
        list.push(item.all.heal);
      }

      let option = {
        title: {
          show: false,
          text: "多线图",
          textStyle: {
            align: "center",
            color: "#fff",
            fontSize: 20,
          },
          top: "5%",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0, 255, 233,0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(255, 255, 255,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 255, 233,0)",
                  },
                ],
                global: false,
              },
            },
          },
        },
        grid: {
          top: "5%",
          left: "3%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: true,
            },
            splitArea: {
              // show: true,
              color: "#f00",
              lineStyle: {
                color: "#f00",
              },
            },
            axisLabel: {
              color: "#fff",
            },
            splitLine: {
              show: false,
            },
            boundaryGap: false,
            data: xAxis,
          },
        ],

        yAxis: [
          {
            type: "value",
            min: 0,
            // max: 140,
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#fff"],
                opacity: 0.06,
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              margin: 20,
              textStyle: {
                fontSize: 10,
                color: "rgba(255,255,255,0.5)",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            itemStyle: {
              normal: {
                color: "#00D686",
              },
            },
            areaStyle: {
              // 渐变色，只需要复制即可
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "#00D686", // 渐变色的起始颜色
                  },
                  {
                    offset: 0.8,
                    color: "rgba(1, 132, 213, 0.1)", // 渐变线的结束颜色
                  },
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
            },

            name: "死亡人数",
            type: "line",
            // smooth: true, //是否平滑
            // showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            // symbol: "circle",
            // symbolSize: 2,
          
            // label: {
            //   show: false,
            //   position: "top",
            //   // textStyle: {
            //   //   color: "rgb(218 255 232)",
            //   //   fontSize: 8,
            //   // },
            // },
            // itemStyle: {
            //   color: "#00D686",
            //   borderColor: "rgb(108,78,0)",
            //   borderWidth: 5,
            //   shadowColor: "rgba(0, 0, 0, 0)",
            //   shadowBlur: 0,
            //   shadowOffsetY: 2,
            //   shadowOffsetX: 2,
            // },
            // tooltip: {
            //   show: false,
            // },
            // areaStyle: {
            //   color: {
            //     type: "linear",
            //     x: 0,
            //     y: 0,
            //     x2: 0,
            //     y2: 1,
            //     colorStops: [
            //       {
            //         offset: 0,
            //         color: "rgba(255,188,13, 0.4)",
            //       },
            //       {
            //         offset: 1,
            //         color: "rgba(255,188,13, 0)",
            //       },
            //     ],
            //     global: false, // 缺省为 false
            //   },
            // },
            data: list,
          },
        ],
      };

      return option;
    },
    three(value) {
      let sj = [];
      let name = [];
      for (let item of value.TopList) {
        name.push(item.province);
        sj.push(item.importedCase);
      }

      let option = {
        tooltip: {
          trigger: "item",
        },
        toolbox: {
          show: true,
        },
        series: [
          {
            name: "地区分布",
            type: "pie",
            center: ["40%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: [
              { value: sj[0], name: name[0] },
              { value: sj[1], name: name[1] },
              { value: sj[2], name: name[2] },
              { value: sj[3], name: name[3] },
              { value: sj[4], name: name[4] },
              { value: sj[5], name: name[5] },
              { value: sj[6], name: name[6] },
              { value: sj[7], name: name[7] },
              { value: sj[8], name: name[8] },
              { value: sj[9], name: name[9] },
              { value: sj[10], name: name[10] },
            ],
          },
        ],
      };

      return option;
    },
  },
};
</script>

<style lang="scss" scoped>
.left {
  width: 25%;
  height: 100%;
  //   background-color: yellow;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .left-top {
    .list {
      width: 100%;
      height: 15%;
      display: flex;
      align-items: center;
      justify-content: center;
      p {
        font-size: 1.042vw;
      }
    }
    width: 100%;
    height: 33%;
    // background-color:green;
    display: flex;
    align-items: center;
    justify-content: center;
    .list-item {
      width: 95%;
      height: 95%;
      // background-color: bisque;
      border: 1px solid #063169;
      background: linear-gradient(to top, #306eef, #306eef) left top no-repeat,
        /*上左*/ linear-gradient(to right, #306eef, #306eef) left top no-repeat,
        /*左上*/ linear-gradient(to left, #306eef, #306eef) right top no-repeat,
        /*上右*/ linear-gradient(to bottom, #306eef, #306eef) right top
          no-repeat,
        /*上右*/ linear-gradient(to left, #306eef, #306eef) left bottom
          no-repeat,
        /*下左*/ linear-gradient(to bottom, #306eef, #306eef) left bottom
          no-repeat,
        /*左下*/ linear-gradient(to top, #306eef, #306eef) right bottom
          no-repeat,
        /*下右*/ linear-gradient(to left, #306eef, #306eef) right bottom
          no-repeat; /*右下*/
      background-size: 2px 16px, 16px 2px, 2px 16px, 16px 2px;
      #mainone {
        width: 100%;
        height: 80%;
      }
      #maintwo {
        width: 100%;
        height: 85%;
      }
      #mainthree {
        width: 100%;
        height: 85%;
      }
    }
  }
}
</style>